<template>
  <div>

    <el-steps :active="active" style="margin-top: 30px;margin-left: 30px;margin-right: 30px">
      <el-step title="未分配" icon="el-icon-upload"></el-step>
      <el-step title="撰稿中" icon="el-icon-upload"></el-step>
      <el-step title="初审" icon="el-icon-upload"></el-step>
      <el-step title="复审" icon="el-icon-upload"></el-step>
      <el-step title="提交官方" icon="el-icon-upload"></el-step>
      <el-step title="已结案" icon="el-icon-upload"></el-step>
    </el-steps>

    <el-container>
      <el-aside align="center" style="background-color: white;width: 210px;">
        <el-image
          style="width: 150px; height: 220px;"
          :src="url"
          fit="scale-down"
          :preview-src-list="srcList"
        >
        </el-image>

        <div style="background-color: lightpink;border-radius: 7px;line-height: 22px"> {{ caseList.patendName }}</div>

      </el-aside>
      <el-main>
        <el-descriptions title="基本信息" style="margin-top: 20px">
          <el-descriptions-item label="业务编号">{{ caseList.caseNo }}</el-descriptions-item>
          <el-descriptions-item label="专利编号">{{ caseList.patendNo }}</el-descriptions-item>
          <el-descriptions-item label="业务类型">{{ contractCaseType(caseList) }}</el-descriptions-item>
          <el-descriptions-item label="市场人员">{{ caseList.empSalesName }}</el-descriptions-item>
          <el-descriptions-item label="撰稿人员">{{ caseList.empWriterName }}</el-descriptions-item>
          <el-descriptions-item label="立案日期">{{ caseList.createTime }}</el-descriptions-item>
          <el-descriptions-item label="案件进度">{{ caseStatus(caseList) }}</el-descriptions-item>
        </el-descriptions>
        <el-button type="primary"
                             plain
                             icon="el-icon-s-promotion"
                             size="mini"
                             @click="submit"
                             v-hasPermi="['case:writerplatform:submit']"
                             >完成撰稿</el-button>
      </el-main>
    </el-container>

    <div style="margin-left: 15px">
      <el-tabs v-model="activeName"  style="margin: 20px" @tab-click="handleClick">
        <el-tab-pane label="著录项信息" name="first">
          <el-collapse v-model="activeNames">
            <el-collapse-item title=">发明人信息😃"
                              name="1"
                              style="width: 90%;
                        margin-top:30px;
                        margin-left:50px;
                        box-shadow:0px 0px 5px -1px coral;
                        ">

              <el-table
                :data="descriptionList"
              >

                <el-table-column
                  label="发明人姓名"
                  align="center"
                  prop="inventorName"
                  v-if="columns[0].visible"
                />
                <el-table-column
                  label="发明人证件号码"
                  align="center"
                  prop="inventorNo"
                  v-if="columns[1].visible"
                />

              </el-table>
            </el-collapse-item>
            <el-collapse-item title=">申请人信息😋"
                              name="2"
                              style="width: 90%;
                        margin-top:30px;
                        margin-left:50px;
                        margin-bottom: 30px;
                        box-shadow:0px 0px 5px -1px rgb(80, 106, 255);
                        ">

              <el-table
                :data="descriptionListB"
              >

                <el-table-column
                  label="申请人姓名"
                  align="center"
                  prop="applicantName"
                  v-if="columns[0].visible"
                />
                <el-table-column
                  label="申请人证件号码"
                  align="center"
                  prop="applicantNo"
                  v-if="columns[1].visible"
                />

              </el-table>
            </el-collapse-item>
            <el-collapse-item title=">代理机构信息😎"
                              name="3"
                              style="width: 90%;
                        margin-top:30px;
                        margin-left:50px;
                        margin-bottom: 30px;
                        box-shadow:0px 0px 5px -1px rgb(80, 255, 95);
                        ">

              <el-table
                :data="descriptionListC"
              >

                <el-table-column
                  label="代理机构"
                  align="center"
                  prop="agency"
                  v-if="columns[0].visible"
                />
                <el-table-column
                  label="代理人"
                  align="center"
                  class-name="small-padding fixed-width">
                  <span>{{ agent }}</span>
                </el-table-column>
                <el-table-column
                  label="执业证号"
                  align="center"
                  prop="PracticeNumber"
                  v-if="columns[1].visible"
                />

              </el-table>
            </el-collapse-item>
          </el-collapse>


        </el-tab-pane>


        <el-tab-pane label="申请文件" name="second">
          <el-table
            :data="caseListB"
          >

            <el-table-column
              label="类型及文件"
              align="center"
              class-name="small-padding fixed-width"
            >
              <span>案件材料</span>
            </el-table-column>

            <el-table-column
              label="提交人"
              align="center"
              prop="customerContact"
              v-if="columns[0].visible"
            />
            <el-table-column
              label="提交日期"
              align="center"
              prop="createTime"
              v-if="columns[1].visible"
            />
            <el-table-column
              label="定稿人"
              align="center"
              prop="empWriterName"
              v-if="columns[2].visible"
            />

            <el-table-column
              label="审核人"
              align="center"
              prop="reviewerName"
              v-if="columns[3].visible"
            />

            <el-table-column
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
            >

              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-notebook-2"
                  v-hasPermi="['case:detail:fileDownload']"
                >
                  <el-link :href="href"
                           target="_blank"
                           class="buttonText"
                           type="primary"
                           :underline="false">
                    下载文件</el-link>

                </el-button>
                <el-button
                  type="text"
                  v-hasPermi="['case:detail:fileUpload']"
                >
                    <el-upload class="avatar-uploader"
                                action="http://oss-cn-chengdu.aliyuncs.com"
                                v-model="Addfrom.url"
                                :http-request="_uploadFile"
                                :multiple=true
                                :before-upload="handleBeforeUpload"
                                :limit="8">
                              <img v-if="1==2"
                                  :src="Addfrom.url"
                                  :width="50"
                                  :height="50"
                                  class="avatar">
                              <i v-else
                                class="el-icon-upload avatar-uploader-icon">上传文件</i>
                    </el-upload>
                </el-button>
              </template>

            </el-table-column>

          </el-table>

        </el-tab-pane>

        <el-tab-pane label="官文信息" name="third">
          <el-table
            :data="officalList"
          >

            <el-table-column
              label="官文信息类型"
              align="center"
              :formatter="officalInformationType"
              prop="officalInformationTypeId"
              v-if="columns[0].visible"
            />
            <el-table-column
              label="信息公文"
              align="center"
              prop="officalInformationDocument"
              :show-overflow-tooltip="true"
              v-if="columns[1].visible"
            />
            <el-table-column
              label="发文时间"
              align="center"
              prop="createTime"
              v-if="columns[2].visible"
            />
          </el-table>
        </el-tab-pane>

        <!-- 费用清单 -->
        <el-tab-pane label="费用清单" name="five">
          <el-table :data="costInfo">
            <el-table-column
              label="官方费用"
              align="center"
              key="contractThirdCost"
              prop="contractThirdCost"
              :show-overflow-tooltip="true"
              v-if="columns[8].visible"
            />
            <el-table-column
              label="代理服务费"
              align="center"
              key="contractServiceCost"
              prop="contractServiceCost"
              :show-overflow-tooltip="true"
              v-if="columns[9].visible"
            />
          </el-table>
        </el-tab-pane>

        <!-- 案件历史 -->
        <el-tab-pane label="案件历史" name="six">
          <div class="block">
            <div class="radio">
              排序：
              <el-radio-group v-model="reverse">
                <el-radio :label="true">倒序</el-radio>
                <el-radio :label="false">正序</el-radio>
              </el-radio-group>
            </div>
            <el-timeline :reverse="reverse">
              <el-timeline-item
                v-for="(history, index) in caseHistories"
                :key="index"
                :timestamp="history.createTime">
                {{caseHistoryFormat(history)}}
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>

// @iCAN Vue直传OSS文件
import { uploadFile, uploadImg } from '@/api/patent/alioss'
import { detailCase, detailCaseB,detailOffical,caseHistoryList,detailInventor,detailApplicant,caseCost,updateCase,insertCaseHistory,updatePatent} from '@/api/patent/Bao'

export default {
  //声明使用字典
  dicts:[
    //官文类型字典
    "ipms_information_type",
    'ipms_case_history_status',
    //业务类型字典
    "ipms_contract_case_type",
    //案件进度字典
    "ipms_case_status",
  ],
  data() {
    return {
      activeNames: [''],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 案件集合数据
      caseList: [],
      caseListB: [],
      // 官文集合数据
      officalList: [],
      //著录项集合数据
      descriptionList: [],
      descriptionListB: [],
      descriptionListC: [
        {agency:'J8Studio.meta',
          PracticeNumber:'3566161616189',
        }],
      agent:'',
      //标签页默认展开页
      activeName: 'first',
      //案件编号
      caseNo: "",
      //专利ID
      patendId: null,
      //专利图标地址
      url:'',
      //放大预览
      srcList: [],
      //专利材料下载地址
      href:'',
      //案件进度步骤条
      active:null,
      // 列信息
      columns: [
        { key: 0, visible: true },
        { key: 1, visible: true },
        { key: 2, visible: true },
        { key: 3, visible: true },
        { key: 4, visible: true },
        { key: 5, visible: true },
        { key: 6, visible: true },
        { key: 7, visible: true },
        { key: 8, visible: true },
        { key: 9, visible: true },
      ],


      /* 案件历史 */
      //正序、倒序
      reverse: true,
      //案件历史数据源
      caseHistories:[],
      //费用
      costInfo:[],

      //vue oss直传第二版
      fileList: [],
      Addfrom: {
        url: '',
      },
      //专利
      patentObj: {
        /*专利主键id*/
        patendId: undefined,
        /*专利材料*/
        patendMaterials: undefined,

      },

      //修改案件参数（案件状态、撰稿人）
      caseModify: {
        caseNos: [],
        caseOperation:'',
      },

      caseId:undefined,
      ids:[]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    //官文类型字典翻译
    officalInformationType(row){
      return this.selectDictLabel(this.dict.type.ipms_information_type, row.officalInformationTypeId);
    },
    //业务类型字典翻译
    contractCaseType(row){
      return this.selectDictLabel(this.dict.type.ipms_contract_case_type, row.contractCaseTypeId);
    },
    //案件进度字典翻译
    caseStatus(row){
      return this.selectDictLabel(this.dict.type.ipms_case_status, row.caseStatusId);
    },
    getList() {
      //路由传参caseNo
      this.caseNo = this.$route.query.caseNo;
      //基本信息
      detailCase(this.caseNo).then((response) => {
        this.caseId = response.data.caseId;
        this.caseList = response.data;
        this.url=response.data.patendIcon;
        this.srcList.push(response.data.patendIcon);
        this.agent=response.data.empSalesName;
        if(this.caseList.caseStatusId=="0"){
          this.active=1;
        }else if(this.caseList.caseStatusId=="1"){
          this.active=2;
        }else if(this.caseList.caseStatusId=="3"){
          this.active=3;
        }else if(this.caseList.caseStatusId=="4"){
          this.active=4;
        }else if(this.caseList.caseStatusId=="7"){
          this.active=5;
        }else if(this.caseList.caseStatusId=="9"){
          this.active=6;
        }
      });
      //申请文件
      detailCaseB(this.caseNo).then((response) => {
        this.caseListB = response.rows;
        this.patendId=response.rows[0].patendId;
        this.href = response.rows[0].patendMaterials;
        //著录项信息
        detailInventor(this.patendId).then((response) => {
          this.descriptionList = response.rows;
        });
        detailApplicant(this.patendId).then((response) => {
          this.descriptionListB = response.rows;
        });
      });
      //官文信息
      detailOffical(this.caseNo).then((response) => {
        this.officalList = response.rows;
      });
    },

    //tabs标签点击
    handleClick(tab, event) {
      if(this.activeName == "five"){
        //获取案件的合同费用
        this.caseCostInfo();
      };

      if(this.activeName == "six"){
        //获取案件历史列表
        this.getCaseHistory();
      }
    },

    //案件历史获取方法
    getCaseHistory(){
      caseHistoryList(this.caseNo).then((response) => {
        this.caseHistories = response.data;
      });
    },

    //案件费用相关
    caseCostInfo(){
      caseCost(this.caseNo).then((response) => {
        this.costInfo = response.rows;
        console.log("费用",this.costInfo);
      })
    },

    //字典翻译方法
    caseHistoryFormat(row){
      return this.selectDictLabel(this.dict.type.ipms_case_history_status,row.caseHistoryStatusId);
    },


    //撰稿完成提交
    submit(){
      //案件编号
      this.caseModify.caseNos.push(this.caseNo);
      //案件操作
      this.caseModify.caseOperation = "撰稿人提交"

      updateCase(this.caseModify).then((response) => {
        this.$modal.msgSuccess('提交成功')
        //向案件历史记录表写入数据
        const caseHistoryStatusDescrip = '待初审';    //案件历史状态2--待初审
        this.ids.push(this.caseId);
        insertCaseHistory(this.ids,caseHistoryStatusDescrip).then((response) => {
        });
      })
    },


    //上传文件
    _uploadFile(file) {
      // then抓alioss.js的Promise resolve  => async wait
      uploadFile(file.file).then((resp) => {
        //获取上传地址
        this.patentObj.patendMaterials = resp
        //获取专利id
        this.patentObj.patendId = this.patendId;
        //修改长传文件地址
        updatePatent(this.patentObj).then((response) => {
          this.$message.success('文件上传成功')
        })
      })
    },

    //第二版上传文件之前
    handleBeforeUpload(file) {
      const isJPEG = file.name.split('.')[1] === 'jpeg'
      const isJPG = file.name.split('.')[1] === 'jpg'
      const isPNG = file.name.split('.')[1] === 'png'
      const isWEBP = file.name.split('.')[1] === 'webp'
      const isGIF = file.name.split('.')[1] === 'gif'
      const isLt500K = file.size / 1024 / 1024 / 1024 / 1024 < 4
      if (!isJPG && !isJPEG && !isPNG && !isWEBP && !isGIF) {
        //this.$message.error('上传图片只能是 JPEG/JPG/PNG 格式!')
      }
      if (!isLt500K) {
        // this.$message.error('单张图片大小不能超过 4mb!')
      }
      // return (isJPEG || isJPG || isPNG || isWEBP || isGIF) && isLt500K
      return true
    },
  }

}
</script>

<style lang="stylus" scoped>

</style>
